<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初体验react使用</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/babel.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const title = '我是一个标题'
      // html字符串
      const content = `<h3>你好世界</h3>`

      const vnode = (
        <div>
          {/* 把动态属性的引号去除，使用{}来包裹，花括号里面写动态值 */}
          <div title={title}>hello</div>
          <div>
            {/* 在jsx语法中 for => htmlFor */}
            <label htmlFor="username">
              姓名：
              <input type="text" id="username" />
            </label>
          </div>
          {/* 在jsx语法中 class => className */}
          <div className="title">外联样式</div>
          {/* 直接通过{}方式来渲染数据，它会转译输出，安全的, 不存在xss攻击 */}
          <div>{content}</div>
          {/* 不转译输出 == 存在xss攻击问题 */}
          <div dangerouslySetInnerHTML={{ __html: content }}></div>
        </div>
      )

      ReactDOM.createRoot(document.getElementById('root')).render(vnode)
    </script>
  </body>
</html>
